<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background-color: #192127;
        }

        .big {
            width: 1000px;
            position: relative;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }

        .top {
            width: 100%;
            height: 500px;
            background-image: url(./image.png);
            background-size: 100% 500px;
        }

        input {
            width: 200px;
            height: 20px;
            margin: 20px 40%;
            background-color: #141727;
            border: 0;
            padding-left: 5px;
            color: white;
        }

        ul li {
            width: 150px;
            height: 170px;
            list-style: none;
            color: white;
            float: left;
            margin: 10px 5px;
            transition: all .5s;
        }

        ul li:hover {
            transform: translate(0, -10px);
        }

        li img {
            width: 150px;
            height: 150px;
        }

        li p {
            text-align: center;
        }

        .mtk {
            width: 500px;
            height: 430px;
            background-color: white;
            position: fixed;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            display: none;
        }

        .sz {
            width: 270px;
            height: 10px;
            margin-top: 5px;
        }
    </style>
</head>

<body>
    <div class="big">
        <div class="top"></div>
        <p><input type="text" placeholder="检索"></p>
        <ul>
            <!-- <li>
                <p><img src="./image.png" alt=""><br><span>LOL</span></p>
            </li> -->
        </ul>
        <div class="mtk">
            <p style="margin: 15px;"><b style="font-size: 18px;">黑暗之女安妮</b><span
                    style=" margin-left: 325px; font-size: 30px;">×</span></p>
            <div>
                <div style="display: flex; border-top: 1px solid #666;" >
                    <div style=" margin-top: 15px;">
                        <img src="./image.png" alt="" style="width: 180px; height: 180px; margin-left: 15px;">
                    </div>
                    <div style="margin-left: 25px; margin-top: 40px; color: white; font-size: 10px;">
                        <p class="sz">
                        <p style="width: 100%; background-color: #198754; border-radius: 5px; padding-left: 8px;">
                            <span>攻击：</span>
                        </p>
                        </p>
                        <p class="sz">
                        <p style="width: 30%; background-color: #0dcaf0; border-radius: 5px; padding-left: 8px;">
                            <span>防御：</span>
                        </p>
                        </p>
                        <p class="sz">
                        <p style="width: 70%; background-color: #fec107; border-radius: 5px; padding-left: 8px;">
                            <span>魔法：</span>
                        </p>
                        </p>
                        <p class="sz">
                        <p style="width: 60%; background-color: #db3544; border-radius: 5px; padding-left: 8px;">
                            <span>难度：</span>
                        </p>
                        </p>
                    </div>
                </div>
                <div style="margin: 15px; font-size: 17px;">
                    <p>弗拉基米尔是一个渴望凡人鲜血的魔鬼，早在诺克萨斯帝国建立之初就开始干涉帝国的内政。他的血巫术不仅能超越自然规律延长他的寿命，而且还能让他随心所欲地控制其他人的身体和思想。在诺克萨斯贵族奢华的沙龙聚会上，这个能力让他围绕自己建立了狂热的教众，而在底层的后巷里，这个能力则让他吸干敌人的鲜血</p>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
<script src="./lib/axios.min.js"></script>
<script>
    var ul = document.querySelector('ul')
    var big = document.querySelector('.big')
    var mtk = document.querySelector('.mtk')
    function render(data) {
        var cs = data ? data : ""
        axios.get('https://hmajax.itheima.net/api/lol/search').then(res => {
            if (cs) {
                var arr = cs
                var brr = arr.map((ele, index) => {
                    return `
                <li data-id=${ele.heroId}>
                    <p><img src="${ele.icon}" alt=""><br><span>${ele.title}</span></p>
                </li>
                `
                }).join("")
                ul.innerHTML = brr
            } else {
                var arr = res.data.data
                var brr = arr.map((ele, index) => {
                    return `
                <li data-id=${ele.heroId}>
                    <p><img src="${ele.icon}" alt=""><br><span>${ele.title}</span></p>
                </li>
                `
                }).join("")
                ul.innerHTML = brr
            }
        })
    }
    render()
    big.addEventListener('input', function (e) {
        if (e.target.tagName == 'INPUT') {
            if (e.target.value != '') {
                axios.get(`https://hmajax.itheima.net/api/lol/search?q=${e.target.value}`).then(res => {
                    var data = res.data.data
                    render(data)
                    console.log(data);
                    
                })
            } else {
                setTimeout(() => {
                    alert('内容不能为空')
                    render()
                }, 500);
            }
        }
    })
    big.addEventListener('click',function(e){
        var id =e.target.parentNode.parentNode.dataset.id
        axios.get(`https://hmajax.itheima.net/api/lol/info?id=${id}`).then(res=>{
            console.log(res.data.data);
            var arr=[{}]
            var sj=res.data.data.hero
            var atk=sj.attack
            var def=sj.defense
            var mag=sj.magic
            var dif=sj.difficulty
            var icon=sj.icon
            var name=sj.name
            var title=sj.title
            var brr=arr.map(ele=>{
                return`
                 <p style="margin: 15px;"><b style="font-size: 18px;">${name}${title}</b><span
                    style="font-size: 30px; float:right" onclick='gb()'>×</span></p>
                    <div>
                <div style="display: flex; border-top: 1px solid #666;" >
                    <div style=" margin-top: 15px;">
                        <img src="${icon}" alt="" style="width: 180px; height: 180px; margin-left: 15px;">
                    </div>
                    <div style="margin-left: 25px; margin-top: 40px; color: white; font-size: 10px;">
                        <p class="sz">
                        <p style="width: ${atk}0%; height: 15px;  background-color: #198754; border-radius: 5px; padding-left: 8px;">
                            <span>攻击：</span>
                        </p>
                        </p>
                        <p class="sz">
                        <p style="width: ${def}0%; height: 15px; background-color: #0dcaf0; border-radius: 5px; padding-left: 8px;">
                            <span>防御：</span>
                        </p>
                        </p>
                        <p class="sz">
                        <p style="width: ${mag}0%; height: 15px; background-color: #fec107; border-radius: 5px; padding-left: 8px;">
                            <span>魔法：</span>
                        </p>
                        </p>
                        <p class="sz">
                        <p style="width: ${dif}0%; height: 15px; background-color: #db3544; border-radius: 5px; padding-left: 8px;">
                            <span>难度：</span>
                        </p>
                        </p>
                    </div>
                </div>
                <div style="margin: 15px; font-size: 17px;">
                    <p>弗拉基米尔是一个渴望凡人鲜血的魔鬼，早在诺克萨斯帝国建立之初就开始干涉帝国的内政。他的血巫术不仅能超越自然规律延长他的寿命，而且还能让他随心所欲地控制其他人的身体和思想。在诺克萨斯贵族奢华的沙龙聚会上，这个能力让他围绕自己建立了狂热的教众，而在底层的后巷里，这个能力则让他吸干敌人的鲜血</p>
                </div>
                </div>
                `
            }).join('')
            mtk.innerHTML=brr
            mtk.style.display='block'
        })
    })
    function gb(){
        mtk.style.display='none'
    }
</script>